@extends('admin.pub.pub')
@section('title','权限添加')
@section('bread1','权限管理')
@section('bread2','权限添加')
@section('css')
    <style>
        /*方法一、修改源生*/
        .select-box {
            border: solid 1px #ddd;
            box-sizing: border-box;
            vertical-align: middle;
            width: 100%;
            display: inline-block
        }

        .select {
            border: solid 1px #ddd;
            box-sizing: border-box;
            cursor: pointer;
            line-height: normal;
            font-weight: normal;
            width: 100%;
            white-space: nowrap
        }

        .select-box .select {
            border: none
        }

        .select-box.inline, .select-box.inline .select {
            width: auto
        }

        .select-box, .select-box.size-M {
            padding: 4px 5px
        }

        .select, .size-M .select {
            font-size: 14px
        }

        .select-box.size-MINI {
            padding: 0px 5px
        }

        .size-MINI .select {
            font-size: 12px
        }

        .select-box.size-S {
            padding: 3px 5px
        }

        .size-S .select {
            font-size: 12px
        }

        .select-box.size-L {
            padding: 8px 5px
        }

        .size-L .select {
            font-size: 16px
        }

        .select-box.size-XL {
            padding: 10px 5px
        }

        .size-XL .select {
            font-size: 18px
        }

        @media (max-width: 767px) {
            .responsive .select-box {
                border: none
            }

            .responsive .select-box .select,
            .responsive .select {
                border: solid 1px #ddd;
                padding: 10px;
                font-size: 16px
            }

            .responsive .select-box,
            .responsive .select-box.size-M,
            .responsive .select-box.size-MINI,
            .responsive .select-box.size-S,
            .responsive .select-box.size-L,
            .responsive .select-box.size-XL {
                height: auto;
                padding: 0;
            }
    </style>
@endsection
@section('content')
    <div class="container">
        <form method="post" role="form" class="form-horizontal">
            <div class="form-group-sm mb-10 mt-10">
                <label for="pid">父级权限</label>
                <span class="select-box radius">
                    <select class="select" size="1" name="pid" id="pid">
                        <option value="0" selected> -- 顶级 -- </option>
                        @foreach($data as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                        @endforeach
                    </select>
                </span>
            </div>
            <div class="form-group-sm mb-10">
                <label for="rolename">权限名称</label>
                <input type="text" class="input-text radius" name="name" id="name">
            </div>
            <div class="form-group-sm mb-10">
                <label for="rolename">权限路由</label>
                <input type="text" class="input-text radius" name="route" id="route">
            </div>
            <div class="form-group-sm mb-10">
                <div class="check-box">
                    <input type="checkbox" value="1" name="is_menu" id="is_menu">
                    <label for="is_menu">是否为菜单</label>
                </div>
            </div>
            <button id="add" class="btn btn-primary">添加</button>
        </form>
    </div>
@endsection
@section('js')
    <script>
		$('#is_menu').iCheck({
			checkboxClass: 'icheckbox-blue',
			radioClass: 'iradio-blue',
			increaseArea: '20%'
		})

		$('#add').click(function () {
			let pid = $('#pid').val();
			let name = $.trim($('#name').val());
			let route = $.trim($('#route').val());
			let is_menu = $('#is_menu').prop('checked') ? 1 : 0;
			let _token = '{{ csrf_token() }}';
			$.ajax({
				url: '{{ route('admin.permission.store') }}',
				type: 'post',
				data: {pid, name, route, is_menu, _token},
				dataType: 'json',
				success(res) {
					if (res.status == 0) {
						location.replace(location.href);
						layer.msg('成功')
					} else {
						layer.alert('失败')
					}
				},
				error(obj) {
					let error = JSON.parse(obj.responseText)
					console.log(error)
				}
			})
			return false;
		})
    </script>
@endsection